<template>
	<view class="main">
		<view class="card">
			<view class="card-tit flex align"><text></text>基本信息</view>
			<view class="input-item flex align" @click="show = true">
				<view>应用</view>
				<input placeholder="请选择" v-model="app_name" disabled />
			</view>
			<view class="input-item flex align">
				<view>昵称</view>
				<input placeholder="请输入昵称" v-model="nickname" />
			</view>
			<view class="input-item flex align" v-if="app_name!=''">
				<view>{{app_name}}号</view>
				<input placeholder="请输入" v-model="appid" />
			</view>
			<view class="input-item flex align" v-if="app_name!=''">
				<view>{{app_name}}主页链接</view>
				<input placeholder="请输入主页" v-model="homepage" />
			</view>
			<view class="input-item flex align" v-if="app_name!=''">
				<view>{{app_name}}粉丝数</view>
				<input placeholder="请输入粉丝数" type="number" v-model="fans" />
			</view>
			<view class="input-item flex align" v-if="app_name!=''" @click="show2 = true">
				<view>{{app_name}}级别</view>
				<input placeholder="请选择" v-model="level_name" disabled />
				<!-- <input placeholder="请输入级别" type="number" v-model="level" /> -->
			</view>
			<view class="input-item flex align">
				<view>手机号</view>
				<input placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="input-item flex align">
				<view>所在地区</view>
				<view style="width: 432rpx;">
					<uni-data-picker :clear-icon="false" :localdata="items" popup-title="请所在区域"
						@change="onchange"></uni-data-picker>
				</view>
			</view>
		
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>上传二维码</view>
			<view class="loadUp" @click="toUpload()" v-if="appqrcode==''">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
			<view class="logo" @click="toUpload()" v-else>
				<image :src="appqrcode"></image>
			</view>
		</view>
		<view class="resign-btn" @click="toSubmit">立即入驻</view>
		<!-- 应用app -->
		<u-picker :show="show" @cancel="show=false" @confirm="onConfirm" keyName="name" :columns="appList"></u-picker>
		<u-picker :show="show2" @cancel="show2=false" @confirm="onConfirm2" keyName="name" :columns="levelList"></u-picker>
	<!-- 免责声明 -->
	<view>
		<uni-popup ref="alertDialog" :mask-click="false" type="center">
			<view class="agreement-view" :style="{ width: scrollWidth * 0.80 + 'px', height: 150 + 'px' }">
				<!-- 弹框提示头 -->
				<view class="u-text-center">用户使用须知</view>
				<scroll-view scroll-y class="agreement-content" :style="{ height:150 + 'px' }">
					<view class="crntent" style="padding:  0 30rpx;">
						使用前，请您仔细阅读<text style="color: cornflowerblue;" @click="xieyi">《用户服务协议》</text>及<text
							style="color: cornflowerblue;" @click="yinsi">《隐私政策》</text>
					</view>
				</scroll-view>
				<view class="agreement-btns" :style="{ lineHeight: 42 + 'px' }">
					<view @click="toback()" class="no-btn text" target="miniProgram" open-type="exit">
						暂不使用
					</view>
					<view class="yse-btn text" @tap="admit">同意</view>
				</view>
			</view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import {
		regionLists,
		dictAll,
		darenApply,
		userDetail
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/utils/oss/oss.js';
	export default {
		data() {
			return {
				imageValue: [],
				columns: [
					[]
				],
				show: false,
				show2: false,
				appList: [],
				app_type: '',
				app_name: '',
				items: [],
				region: [],
				appqrcode: '',
				phone:'',
				appid:'',
				nickname:'',
				homepage:'',
				appqrcode:'',
				fans:'',
				level:'',
				levelList:[],
				level_name:''
			};
		},
		onLoad() {
			this.getAllList()
			this.getRegion()
			this.judge();
			// this.getInfo()
		},
		methods: {
			// async getInfo(){
			//   const result = await userDetail()	
			//   if(result.code==1){
				  
			//   }else{
			// 	  uni.showToast({
				  	
			// 	  })
			//   }
			// },
			toback(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/xieyi/register_info'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/xieyi/private_policy'
				});
			},
			// 初始化的时候调用参数，判断用户是否第一次进入
			judge() {
				uni.getStorage({
					key: 'agreement_key',
					success: () => {
						// 获取到了不显示弹窗
						this.$refs.alertDialog.close();
					},
					fail: () => {
						this.$refs.alertDialog.open()
					}
				})
			},
			// 同意按钮
			admit() {
				try {
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_Date', new Date().toLocaleString())
				} catch (e) {
					//TODO handle the exception
				}
				this.$refs.alertDialog.close();
			},
			// 入驻
			toSubmit(){
				let that = this
				uni.showModal({
					title: "提示",
					content: "确定要提交入驻吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toCom()
						} else {
							
						}
					}
				
				})
			},
			async toCom(){
				let obj = {
					app:this.app_type,
					phone:this.phone,
					region:this.region,
					appid:this.appid,
					nickname:this.nickname,
					homepage:this.homepage,
					appqrcode:this.appqrcode,
					fans:this.fans,
					level:this.level,
				}
				const result = await darenApply(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(()=>{
					  uni.navigateTo({
					  	url:'/pages/resign/userList'
					  })	
					},500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toUpload() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.appqrcode = 'https://drxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					}
				})
			},
			async getRegion() {
				const result = await regionLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					item.children.forEach(item2 => {
						item2.text = item2.name
						item2.value = item2.id
						if (item2.children.length > 0) {
							item2.children.forEach(item3 => {
								item3.text = item3.name
								item3.value = item3.id
							})
						}
					})
				})
				this.items = result.data
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.region = arr
			},
			async getAllList() {
				const result = await dictAll()
				this.appList = [result.data.app]
				this.levelList = [result.data.daren_level]
			},
			onConfirm(e) {
				console.log(e)
				this.app_type = e.value[0].value
				this.app_name = e.value[0].name
				this.show = false
			},
			onConfirm2(e) {
				console.log(e)
				this.level = e.value[0].value
				this.level_name = e.value[0].name
				this.show2 = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		/* line-height: 18px; */
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}
	
	.agreement-view {
		margin-top: 20px;
		box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
		border-radius: 20rpx;
		padding: 20rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		width: 300px;
		height: 200rpx;
		align-items: center;
		/* justify-content: center; */
		background-color: #fff;
	}
	
	.u-text-center {
		font-size: 15px;
		padding-bottom: 20rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 600;
		width: 100%;
		height: 30px;
		text-align: center;
	}
	
	.agreement-content {
		overflow-y: scroll;
		padding: 0rpx 40rpx 10rpx 40rpx;
	}
	
	.agreement-btns {
		width: 100%;
		/* height: 85rpx; */
		display: flex;
		flex-direction: row;
	}
	
	.yse-btn {
		color: #fff;
		background-color: red;
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 20rpx 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.no-btn {
		/* background-color: aquamarine; */
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 0 20rpx;
	}
	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 30rpx 24rpx;
			background: white;
			margin-bottom: 30rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;

				text {
					background: #FF6543;
					display: block;
					width: 5rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
				}
			}
		}

		.resign-btn {
			background: #FF6543;
			border-radius: 12rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: white;
			padding: 10rpx 81rpx;
			width: fit-content;
			margin: 80rpx auto;
		}
	}
</style>